import QueryFilter from "@/components/QueryFilter"
import Toolbar from "@/components/Toolbar"
import useAntdList from "@/hooks/useAntdList"
import useAntdModal from "@/hooks/useAntdModal"
import { queryCodeupApp } from "@/service/deliver"
import { formatDate, safeJSONparse } from "@/utils/utils"
import { PlusOutlined } from "@ant-design/icons"
import { Button, Form, Input, Space, Table, Tabs, Tag } from "antd"
import Card from "antd/lib/card/Card"
import { useState } from "react"
import DeployApp from "./components/DeployApp"
import DeployDrawer from "./components/DeployDrawer"
import SaveApp from "./components/SaveApp"
import SaveReleasePlan from "./components/SaveReleasePlan"
import SubAppDrawer from "./components/SubAppDrawer"

const App = () => {
    const [form] = Form.useForm();
    // const [activeKey, setActiveKey] = useState('dev')


    const { tableProps, search, refresh } = useAntdList(queryCodeupApp, {

        form,


    })
    const saveReleasePlan = useAntdModal({
        refresh: () => { }
    });
    const saveApp = useAntdModal({ refresh });
    const deployDrawer = useAntdModal({ refresh });
    const deployApp = useAntdModal({ refresh });
    const subAppDrawer = useAntdModal({ refresh });
    
    const columns = [
        {
            title: '应用ID',
            dataIndex: 'id'
        }, {
            title: '应用名称',
            dataIndex: 'name'
        }, {
            title: '类型',
            dataIndex: 'type',
            render(_) {
                return <Tag color={['green', 'orange', 'cyan'][_ - 1]}>
                    {['主应用', '子应用', '混合应用'][_ - 1]}
                </Tag>
            }
        }, {
            title: '创建时间',
            dataIndex: 'createdAt',
            render: (_) => formatDate(_)

        }, {
            dataIndex: 'createdAt',
            render: (_) => formatDate(_)

        }, {
            title: '操作',
            render(_) {
                return <Space>

                    <Button onClick={() => saveApp.openModal({
                        ..._,
                        testConfig: safeJSONparse(_.testConfig),
                        devConfig: safeJSONparse(_.devConfig),
                    }, { title: '编辑应用' })} type='link'>编辑</Button>
                    {/* <Button type='link'>跳转代码库</Button> */}

                    <Button onClick={() => deployApp.openModal({ ..._ }, {

                        title: `${_.name}`
                    })} type='link'>部署</Button>
                    {
                        _.type != 2 && <Button onClick={() => subAppDrawer.openModal({
                            ..._
                        })} type='link'>子应用</Button>
                    }

                </Space>
            }
            // dataIndex:''
        }

    ]

    return <Card>
        <DeployDrawer

            {...deployDrawer} />
        <DeployApp

            {...deployApp} />
        <SubAppDrawer

            {...subAppDrawer} />

        <SaveApp {...saveApp} />
        <SaveReleasePlan {...saveReleasePlan} />
        <QueryFilter form={form} submit={search.submit} reset={search.reset} >
            <Form.Item label='应用名称' name='name'>
                <Input />
            </Form.Item>
            <Form.Item label='类型' name='type'>
                <Input />
            </Form.Item>
        </QueryFilter>

        <Toolbar
            leftRender={
                <Space>

                    <Button type='primary' icon={<PlusOutlined />} onClick={() => saveApp.openModal({

                    }, { title: '新建应用' })} >新建应用</Button>
                    <Button type='primary' icon={<PlusOutlined />} onClick={() => saveReleasePlan.openModal({}, { title: '新建迭代计划' })} >新建迭代计划</Button>
                </Space>
            }
        />
        {/* <Tabs
            size='small'
            // activeKey={activeKey}
            // onChange={setActiveKey}
            {...tabsProps}
            items={[{
                key: 'dev',
                label: '开发环境'
            }, {
                key: 'test',
                label: '测试环境'
            }]}

        /> */}
        <Table rowKey='id' size='small' columns={columns} {...tableProps}

        // expandable={{
        //     expandedRowRender: (record) => <ReleasePlan env={activeKey}/>,
        //   }}
        />
    </Card>
}
export default App